<template>
  <div class="questionnaire-contain">
    <div class="section">
      <div class="questionnaire-header">
        <div class="text1" @click="router.back()"></div>
        <div class="header-right"></div>
      </div>
      <div class="questionnaire-body">
        <div class="body-title">健康症状在线问询测试</div>
        <div class="process">
          <div class="process-text">
            <div class="text1">》》即将获得专业的分析报告…</div>
            <div class="text2">
              <span class="text3">{{ data.finishedNum }}</span
              >/14
            </div>
          </div>
          <div class="process-box">
            <div
              class="process-item"
              :style="{ width: (data.finishedNum / (data.questions.length || 1)) * 100 + '%' }"
            ></div>
          </div>
        </div>
        <div class="questions">
          <template v-for="(item, index) in data.questions">
            <div class="item">
              <div class="item-title">{{ index + 1 }}.{{ item.name }}</div>
              <div class="item-options" v-if="item.type == 'radio'">
                <el-radio-group v-model="item.answer" size="large" class="questionnaire-radio">
                  <el-radio
                    :value="option.id"
                    size="large"
                    v-for="(option, o) in item.options"
                    :key="o"
                    >{{ option.name }}</el-radio
                  >
                </el-radio-group>
              </div>
              <div class="item-options" v-if="item.type == 'checkbox'">
                <el-checkbox-group
                  v-model="item.answer"
                  class="questionnaire-checkbox"
                  :class="{ 'questionnaire-checkbox4': item.col == 4 }"
                >
                  <el-checkbox
                    :label="option.name"
                    :value="option.id"
                    v-for="(option, o) in item.options"
                    :key="o"
                  />
                </el-checkbox-group>
              </div>
            </div>
          </template>
          <div class="buttons">
            <div class="questionLastBtn">上一题</div>
            <div class="questionSubmitBtn" @click="save">提 交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="questionnaire">
import { reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '../stores'
import dayjs from 'dayjs'
const router = useRouter()
const route = useRoute()
const store = useStore()

// 初始化数据
let data = reactive({
  id: route.query.id, //场次的ID
  questions: [], //问题
  finishedNum: 0,
  lock: false //锁
})

// 初始化 问题
const initQuestion = () => {
  let questions = JSON.parse(JSON.stringify(store.questions))
  questions.forEach((el) => {
    if (el.type == 'radio') {
      el.answer = ''
    }
    if (el.type == 'checkbox') {
      el.answer = []
    }
  })
  data.questions = questions
}
initQuestion()
// 保存提交
const save = async () => {
  let answer = []
  for (let i = 0; i < data.questions.length; i++) {
    const item = data.questions[i]
    if (item.answer.length == 0) {
      return window.showMessage({
        message: `第${i + 1}题为作答`
      })
    }
    if (item.type == 'radio') {
      answer.push({
        questionId: item.id,
        answerId: item.answer,
        createtime: (dayjs().valueOf() / 1000).toFixed(0),
        updatetime: (dayjs().valueOf() / 1000).toFixed(0)
      })
    }
    if (item.type == 'checkbox') {
      for (let o = 0; o < item.answer.length; o++) {
        answer.push({
          questionId: item.id,
          answerId: item.answer[o],
          createtime: (dayjs().valueOf() / 1000).toFixed(0),
          updatetime: (dayjs().valueOf() / 1000).toFixed(0)
        })
      }
    }
  }
  let object = {
    frequencyId: data.id,
    answer: answer
  }
  if (data.lock) {
    return
  }
  data.lock = true
  try {
    await window.electron.ipcRenderer.invoke('frequency-update', {
      id: data.id,
      data: { status: '1' }
    })
    await window.electron.ipcRenderer.invoke('answer-save', object)
    data.lock = false
    return window.showMessage({
      message: `提交成功`,
      type: 'success'
    })
  } catch (error) {
    data.lock = false
  }

  return

  // 带有tab的

  // let questions = [
  //   {
  //     id: 't1',
  //     questions: [
  //       {
  //         id: 't1-q1',
  //         type: 'radio',
  //         answer: 't1-q1-o3'
  //       },
  //       {
  //         id: 't1-q2',
  //         type: 'checkbox',
  //         answer: ['t1-q1-o1', 't1-q1-o3']
  //       },
  //       {
  //         id: 't1-q3',
  //         type: 'radio',
  //         answer: 't1-q3-o3'
  //       }
  //     ]
  //   },
  //   {
  //     id: 't2',
  //     questions: [
  //       {
  //         id: 't2-q1',
  //         type: 'radio',
  //         answer: 't2-q1-o3'
  //       },
  //       {
  //         id: 't2-q2',
  //         type: 'checkbox',
  //         answer: ['t2-q1-o1', 't2-q1-o3']
  //       },
  //       {
  //         id: 't2-q3',
  //         type: 'radio',
  //         answer: 't2-q3-o3'
  //       }
  //     ]
  //   }
  // ]
  // let answer = []

  // for (let i = 0; i < questions.length; i++) {
  //   const element = questions[i]

  //   for (let j = 0; j < element.questions.length; j++) {
  //     const item = element.questions[j]
  //     console.log(item)

  //     if (item.type == 'radio') {
  //       answer.push({
  //         questionId: item.id,
  //         answerId: item.answer,
  //         createtime: (dayjs().valueOf() / 1000).toFixed(0),
  //         updatetime: (dayjs().valueOf() / 1000).toFixed(0)
  //       })
  //     }
  //     if (item.type == 'checkbox') {
  //       for (let o = 0; o < item.answer.length; o++) {
  //         answer.push({
  //           questionId: item.id,
  //           answerId: item.answer[o],
  //           createtime: (dayjs().valueOf() / 1000).toFixed(0),
  //           updatetime: (dayjs().valueOf() / 1000).toFixed(0)
  //         })
  //       }
  //     }
  //   }
  // }

  // let object = {
  //   frequencyId: data.id,
  //   answer: answer
  // }

  // await window.electron.ipcRenderer.invoke('frequency-update', {
  //   id: data.id,
  //   data: { status: '1' }
  // })
  // const res = await window.electron.ipcRenderer.invoke('answer-save', object)
}

// 监听器
watch(
  () => data.questions,
  (newVal, oldVal) => {
    data.finishedNum = newVal.filter((el) => el.answer.length > 0).length
  },
  { immediate: true, deep: true }
)
</script>

<style lang="less" scoped>
.questionnaire-contain {
  padding: 16px 24px;
  height: calc(100% - 50px);
}

.section {
  padding: 12px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  height: 100%;
}

.questionnaire-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efeff5;
  padding-bottom: 12px;

  .text1 {
    width: 34px;
    height: 34px;
    background: rgba(49, 186, 181, 0.1);
    border: 1px solid rgba(49, 186, 181, 1);
    border-radius: 50%;
    cursor: pointer;
  }
}

.questionnaire-body {
  padding: 28px 0;
  height: calc(100% - 47px);
  overflow: auto;
  .body-title {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 30px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 45px;
  }
}
.process {
  width: 800px;
  margin: 0 auto 40px;
  .process-text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 10px;
    .text1 {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 13px;
      color: #333333;
      letter-spacing: 0;
      line-height: 13px;
      font-weight: 400;
    }
    .text2 {
      font-family: AlibabaPuHuiTi_2_65_Medium;
      font-size: 13px;
      color: #333333;
      letter-spacing: 0;
      text-align: right;
      line-height: 13px;
      font-weight: 500;
    }
    .text3 {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 20px;
      color: #31bab5;
      letter-spacing: 0;
      text-align: right;
      line-height: 17px;
      font-weight: 700;
    }
  }
  .process-box {
    width: 100%;
    height: 10px;
    border: 1px solid rgba(49, 186, 181, 1);
    border-radius: 5px;
    .process-item {
      width: 0%;
      height: 100%;
      background: #31bab5;
      border-radius: 5px 0px 0px 5px;
      transition: all 0.3s;
    }
  }
}
.questions {
  margin: 0 auto;
  width: 800px;
  padding: 30px;
  background: rgba(216, 216, 216, 0.15);
  border-radius: 16px;
  .item {
    margin-bottom: 32px;
  }
  .item-title {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 22px;
    color: #333333;
    letter-spacing: 0;
    line-height: 22px;
    font-weight: 700;
    margin-bottom: 24px;
  }
}
.buttons {
  display: flex;
  align-items: center;
  div {
    &:first-child {
      margin-right: 15px;
    }
  }
}
</style>
